在前面事件監聽的程式碼中，有使用到一個呼叫函式searchSchedule()，要能呼叫該函式的前提是，在先前的程式碼已經有先定義完成，否則直接呼叫一個不存在的函式，最後將只會得到錯誤訊息。

雖然可以在主程式中適當處(至少要在呼叫函式前)，撰寫該函式的程式碼，但如果所有的函式，都集中撰寫在同一個主程式中，將會導致該主程式篇幅過於巨大，且不易尋找各該函式的位置，對於日後閱讀及除錯上，都增加不少麻煩。

因此在實作上，還是推薦以外部函式的方式進行引入(import)，然後再呼叫該函式，具體的程式碼如下，只要將該行置於主程式的最上方，日後就可以順利呼叫函式。

// ./main.js
import { searchSchedule } from "./schedule.js";

要注意的是，這裡將牽扯到兩個不同的js檔案，因此在對應的schedule.js中，也要記得將searchSchedule()函式匯出(export)，如此才可被主程式引入並使用他。

// ./schedule.js (外部檔案注意需export，函式才可被主程式import)
export { searchSchedule };

也因為涉及到兩個檔案，接下來有個重要的管理問題就因應而生，即要確保檔案位置及檔案名稱，兩者都要正確。這也是之後在面對不同的架構時，需要隨時保持有的意識。

• 原因在於大部分的除錯問題，第一個要先釐清的就是這兩件事，有沒有放錯路徑位置，以及有沒有使用錯誤名稱。
• 同時，在管理不同的程式時，可以依照同性質或同區塊功能，分門別類進行整理，放置於對應的資料夾，如此在引入時，基本上從引入的路徑，可能就可以即早發現錯誤，而避免陷於找錯方向除錯的窘境。
• 再者，往後面對中大型專案時，大部分需要有前端架構(如Vue)的協助，他的架構安排，都有指定既定的資料夾，已進行前端程式的執行，若檔案放錯位置或名稱錯誤，整個網頁根本無法執行，即早保有這樣的意識，對往後要進入前端架構的門檻，也會大幅降低。

此外，除了程式的分門別類便於管理外，還有部分的變數儲存值，因為需要常常撰寫在主程式中，通常會給予其一個變數名稱供儲存使用，往後要修改時，只針對該變數進行更改，即可完成全部程式的更改。

• 但當該變數內容可能涉及到機敏資料，如IP位置、帳號、密碼等時，通常不會在主程式中放入該變數的定義程式碼，而是運用 import / export的方式，將機敏資料的變數定義，存放於外部檔案，再由主程式引入使用，如此也可達到遮蔽機敏資料作用，是較具安全性作法。

  // ./main.js
  import { API_URL } from "./env.js";
  
  // ./env.js (將機敏資料，存放於外部檔案，主程式中僅使用API_URL，可達遮蔽效果)
  export const API_URL = "http://localhost:****/";
  

• 額外提及一點，即便是外部檔案，但只要能讀取到該外部檔案，相關的機敏資料還是有可能外洩。因此在多人線上協作時，通常該含有機敏資料的外部檔案，是不會共享於協作平台上的！取而代之的是，提供一個樣板檔案，供線上協作人員自行下載，再由其自行填入適當的機敏資訊，並於自己本機上使用。

  // ./env_sample.js (樣板檔案)
  export const API_URL = "下載後請改成適當內容，並儲存為'./env.js'，供本機使用 ";